﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            $("#loadButton").jqxButton({ theme: theme });

            $("#loadButton").click(function () {
                // select rows.
                var rows = $("#table tbody tr");
                // select columns.
                var columns = $("#table thead th");
                var data = [];
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    var datarow = {};
                    for (var j = 0; j < columns.length; j++) {
                        // get column's title.
                        var columnName = $.trim($(columns[j]).text());
                        // select cell.
                        var cell = $(row).find('td:eq(' + j + ')');
                        datarow[columnName] = $.trim(cell.text());
                    }
                    data[data.length] = datarow;
                }

                var source =
                {
                    localdata: data,
                    datatype: "array"
                };

                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#jqxgrid").jqxGrid(
                {
                    width: 680,
                    source: dataAdapter,
                    theme: theme,
                    columnsresize: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', dataField: 'First Name', align: 'center', width: 100 },
                      { text: 'Last Name', dataField: 'Last Name', align: 'center', width: 100 },
                      { text: 'Product', dataField: 'Product', align: 'center', width: 170 },
                      { text: 'Available', dataField: 'Available', align: 'center', width: 90 },
                      { text: 'Ship Date', dataField: 'Ship Date', align: 'center', minwidth: 100 },
                      { text: 'Quantity', dataField: 'Quantity', align: 'center', cellsalign: 'right', width: 65 },
                      { text: 'Price', dataField: 'Price', align: 'center', cellsalign: 'right', cellsformat: "c2" }
                    ]
                });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <table style="width: 680px;" id='table' cellspacing="0" cellpadding="2">
            <thead>
                <tr>
                    <th>
                        First Name
                    </th>
                    <th>
                        Last Name
                    </th>
                    <th>
                        Product
                    </th>
                    <th>
                        Available
                    </th>
                    <th>
                        Ship Date
                    </th>
                    <th>
                        Quantity
                    </th>
                    <th>
                        Price
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Nancy
                    </td>
                    <td>
                        Vileid
                    </td>
                    <td>
                        Espresso con Panna
                    </td>
                    <td>
                        true
                    </td>
                    <td>
                        5/20/2012
                    </td>
                    <td>
                        9
                    </td>
                    <td>
                        $3.25
                    </td>
                </tr>
                <tr>
                    <td>
                        Elio
                    </td>
                    <td>
                        Nagase
                    </td>
                    <td>
                        Espresso con Panna
                    </td>
                    <td>
                        true
                    </td>
                    <td>
                        9/26/2012
                    </td>
                    <td>
                        6
                    </td>
                    <td>
                        $3.25
                    </td>
                </tr>
                <tr>
                    <td>
                        Cheryl
                    </td>
                    <td>
                        Nagase
                    </td>
                    <td>
                        Doubleshot Espresso
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        4/19/2012
                    </td>
                    <td>
                        9
                    </td>
                    <td>
                        $3.30
                    </td>
                </tr>
                <tr>
                    <td>
                        Regina
                    </td>
                    <td>
                        Devling
                    </td>
                    <td>
                        Caramel Latte
                    </td>
                    <td>
                        true
                    </td>
                    <td>
                        2/26/2012
                    </td>
                    <td>
                        11
                    </td>
                    <td>
                        $3.80
                    </td>
                </tr>
                <tr>
                    <td>
                        Michael
                    </td>
                    <td>
                        Winkler
                    </td>
                    <td>
                        Doubleshot Espresso
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        7/16/2012
                    </td>
                    <td>
                        4
                    </td>
                    <td>
                        $3.30
                    </td>
                </tr>
                <tr>
                    <td>
                        Mayumi
                    </td>
                    <td>
                        Burke
                    </td>
                    <td>
                        Caffe Americano
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        9/7/2012
                    </td>
                    <td>
                        1
                    </td>
                    <td>
                        $2.50
                    </td>
                </tr>
                <tr>
                    <td>
                        Andrew
                    </td>
                    <td>
                        Nagase
                    </td>
                    <td>
                        Caffe Espresso
                    </td>
                    <td>
                        true
                    </td>
                    <td>
                        4/15/2012
                    </td>
                    <td>
                        3
                    </td>
                    <td>
                        $3.00
                    </td>
                </tr>
                <tr>
                    <td>
                        Ian
                    </td>
                    <td>
                        Burke
                    </td>
                    <td>
                        Green Tea
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        11/16/2012
                    </td>
                    <td>
                        5
                    </td>
                    <td>
                        $1.50
                    </td>
                </tr>
                <tr>
                    <td>
                        Yoshi
                    </td>
                    <td>
                        Petersen
                    </td>
                    <td>
                        White Chocolate Mocha
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        7/26/2012
                    </td>
                    <td>
                        2
                    </td>
                    <td>
                        $3.60
                    </td>
                </tr>
                <tr>
                    <td>
                        Lars
                    </td>
                    <td>
                        Bjorn
                    </td>
                    <td>
                        Peppermint Mocha Twist
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        7/17/2012
                    </td>
                    <td>
                        11
                    </td>
                    <td>
                        $4.00
                    </td>
                </tr>
                <tr>
                    <td>
                        Guylene
                    </td>
                    <td>
                        Devling
                    </td>
                    <td>
                        Caramel Latte
                    </td>
                    <td>
                        true
                    </td>
                    <td>
                        8/9/2012
                    </td>
                    <td>
                        6
                    </td>
                    <td>
                        $3.80
                    </td>
                </tr>
                <tr>
                    <td>
                        Michael
                    </td>
                    <td>
                        Burke
                    </td>
                    <td>
                        Caffe Americano
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        9/10/2012
                    </td>
                    <td>
                        11
                    </td>
                    <td>
                        $2.50
                    </td>
                </tr>
                <tr>
                    <td>
                        Petra
                    </td>
                    <td>
                        Vileid
                    </td>
                    <td>
                        White Chocolate Mocha
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        8/21/2012
                    </td>
                    <td>
                        7
                    </td>
                    <td>
                        $3.60
                    </td>
                </tr>
                <tr>
                    <td>
                        Lars
                    </td>
                    <td>
                        Nodier
                    </td>
                    <td>
                        White Chocolate Mocha
                    </td>
                    <td>
                        false
                    </td>
                    <td>
                        7/16/2012
                    </td>
                    <td>
                        8
                    </td>
                    <td>
                        $3.60
                    </td>
                </tr>
            </tbody>
        </table>
        <input style='margin-top: 10px;' type="button" id="loadButton" value="Load jqxGrid from Table" />
        <div style='margin-top: 10px;' id="jqxgrid">
        </div>
    </div>
</body>
</html>
